<template>
    <div class="">
        <div class="listBox_head">
            <el-button type="primary" plain @click="addStore">添加现有门店</el-button>
        </div>
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
            @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
            <template v-slot:shopType="{ scope }">
                <dict-tag :options="shopTypeLs" :value="scope.row.shopType" />
            </template>
            <template v-slot:status="{ scope }">
                <dict-tag :options="statusLs" :value="scope.row.status" />
            </template>
            <template v-slot:operate="{ scope }">
                <el-button @click="lookDetail(scope.row)" size="small" v-if="scope.row.shopType!=1">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteMerchant(scope.row.id)" v-if="scope.row.shopType!=1">删除</el-button>
            </template>
        </ex-table>
        <addNowSrores v-if="innerVisible" :visible.sync="innerVisible" :id="addSroresId" @success="_handleSuccess">
        </addNowSrores>
    </div>
</template>
<script>
// components
import {
    chainshopList,deleteChainShop
} from "@/api/syChainManagement/syChainManagement.js";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import addNowSrores from "./components/addNowSrores"
export default {
    //   name: "",
    components: {
        ExportExcelButton,
        addNowSrores
    },
    mixins: [handlePageMixin],
    data() {
        return {
            loading: false,
            buttonLoading: false,
            formInline: {
                businessLicence: "", //营业执照
                chainType: "", //连锁类型 1 直营店 2加盟店
                proceedsType: "", //收款类型 1 总部收款 2门店收款
            },
            status: 1,
            storeId: "", //关联门店id
            show: false,
            chainId: "", //总店id
            dialogVisible: false,
            innerVisible: false,
            addSroresId: '',
            tableData: [],
            tableColumn: [
                { prop: "merchantId", label: "商户编号" },
                { prop: "merchantName", label: "商户账号名称" },
                { prop: "shopName", label: "店铺名称" },
                { label: "门店类型", slot: true, slotName: "shopType", },
                { prop: "equityCardSettleType", label: "结算方式" },
                { prop: "equityCardSettleMerchant", label: "结算门店" },
                { label: "商户状态", slot: true, slotName: "status", },
                {
                    label: "操作",
                    slot: true,
                    slotName: "operate",
                    width: "220",
                    fixed: "right",
                },
            ],
            shopTypeLs: [],//门店类型字典
            statusLs: [],//商家状态字典
        };
    },
    created() {
        this.chainId = this.$route.query.id;
        this.getDict();
        this.getList();
    },
    computed: {},
    methods: {
        //获取字典
        getDict() {
            var dictType = "merchant_chain_shop_type,merchant_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.shopTypeLs = res.result[0].dictList;
                    this.statusLs = res.result[1].dictList;
                })
        },
        lookDetail(e) {
            console.log(e);
            //点击编辑
            this.addSroresId = e.id
            this.innerVisible = true;
        },
        addStore() {
            //现有门店
            this.addSroresId = ''
            this.status = 1;
            this.innerVisible = true;
        },
        jumpAdd() {
            //新门店
            this.$router.push({
                path: "/merchants/store-add",
                query: { chainId: this.chainId },
            });
        },
        getList() {
            const params = {
                ...this.pageOptions,
                chainId: this.chainId,
            };
            this.loading = true;
            chainshopList(params)
                .then((res) => {
                    const { total, records } = res.result;
                    this.$refs.table.pageOptions.total = total;
                    this.tableData = records;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //删除deleteMerchant
        deleteMerchant(id) {
            this.$confirm("是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteChainShop(id).then((res) => {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                            duration: 1500,
                        });
                        this.getList();
                    });
                })
                .catch(() => { });
        },
        _handleSuccess() {
            this.getList();
        },
    },
};
</script>
<style lang="scss" scoped>
.el-card-title {
    font-size: 20px;
}
</style>
<style lang="scss" scoped>
.name_title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.el-form--inline .el-form-item {
    margin-right: 40px;
}

::v-deep.el-input--medium .el-input__inner {
    width: 220px !important;
}

.el-input {
    width: 220px;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
}

.list_search {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.table_list {
    display: flex;
    align-items: center;
    // border: 1px solid #DCDFE6;
    border-radius: 7px;
    width: 220px;
    margin-bottom: 10px;
}

.tableBox {
    width: calc(100% / 3);
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #303133;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-right: 0;
}

.tableBox:first-child {
    border-radius: 7px 0px 0px 7px;
}

.tableBox:last-child {
    border-right: 1px solid #dcdfe6;
    border-radius: 0px 7px 7px 0px;
}

.spchoosetext {
    background-color: #fff4e6;
    color: #ff9300;
    // border: 1px solid #ff9300;
}

.listBox_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;

}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.head ::v-deep.el-input-group__prepend {
    width: 110px !important;
}

.button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.from_box {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.from_box_l {
    font-size: 14px;
    color: #606266;
    width: 240px;
    text-align: right;
}

.add_boxls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_box {
    width: 45%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    height: 152px;
    cursor: pointer;
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    color: #e6a23c;
}

.add_box2 {
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    color: #409eff;
}

.add_box:hover {
    opacity: 0.8;
}

.add_box img {
    width: 46px;
    height: 46px;
    margin-right: 12px;
}
</style>
  